<template>
  <!-- 学术 -->
  <div class="learning-box">
    <div class="learning flex">
      <!-- 左边信息 -->
      <ul class="XX-left">
        <li v-for="item in news" :key="item.title">
          <h2>
            <a href="#">
              {{ item.title }}
            </a>
          </h2>
          <div class="XQ">
            <div class="XQ-top">
              {{ item.url_of_website }}
            </div>
            <div class="XQ-buttom">
              <p>
                {{ item.presentation }}
              </p>
            </div>
          </div>
        </li>
      </ul>
      <!-- 右边信息 -->
      <ul class="XX-right">
        <li class="XX-right-top">
          <div class="XX-right-top-photo">
            <img
              src=""
              alt=""
            />
            <a href="#">University of Lisbon</a>
          </div>
          <div class="XX-right-top-url">
            <span>官方网站：</span>
            <a href="#">http://www.ulisboa.pt/</a>
          </div>
          <div class="XX-right-top-presentation">
            <span>
              The University of Lisbon (ULisboa; Portuguese: Universidade de
              Lisboa, [univɨɾsiˈðad(ɨ) dɨ liʒˈbo.ɐ]) is a public research
              university in Lisbon, and the largest university in Portugal. It
              was founded in 2013, from the merger of two previous public
              universities located in Lisbon, the former University of Lisbon
              (1911–2013) and the Technical Universit…
            </span>
            <img
              src=""
              alt=""
            />
          </div>
          <div class="XX-right-top-ico">
            <img
              src=""
              alt=""
            />
            <a href="#">Wikipedia</a>
          </div>
        </li>
        <li class="XX-right-buttom">
          <div class="XX-right-buttom-XGLY flex">
            <div class="XX-right-buttom-text">相关领域</div>
            <div class="XX-right-buttom-ZK">
              <a href="#">
                展开
                <img
                  src=""
                  alt=""
                />
              </a>
            </div>
          </div>
          <div class="XX-right-buttom-LB">
            <div>
              <a href="#">biology</a>
            </div>
            <div>
              <a href="#">chemistry</a>
            </div>
            <div>
              <a href="#">physics</a>
            </div>
            <div>
              <a href="#">medicine</a>
            </div>
            <div>
              <a href="#">computer science</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [
        {
          title: 'VUE - Gallery',
          url_of_website: 'https://vue.tufts.edu/download',
          presentation:
            'Download VUE for the Mac OS. After downloading, double click then VUE.pkg and it will install VUE.app to your applications folder. Linux / Generic JAR-onlyversion (no installer included)Download the generic V…',
        },
        {
          title: 'VUE - Download',
          url_of_website: 'https://vue.tufts.edu/gallery',
          presentation:
            'The "Gallery" section is new to our website. We hope to build a strong VUE community of users and thinkers. We need your help in creating a stimulating gallery area, showcasing your uses of VUE. Let u…',
        },
        {
          title: 'Vue - Virtual University of Edinburgh',
          url_of_website: 'vue.ed.ac.uk',
          presentation:
            'Vue - Virtual University of Edinburgh. Vue is a virtual educational and research institute bringing together all those. interested in the use of virtual worlds for teaching, research and outreach. related to the Unive…',
        },
        {
          title: 'VUE - Documentation',
          url_of_website: 'https://vue.tufts.edu/docs',
          presentation:
            'VUE Search · Organize · Present. About Gallery Features Forums FAQ Documentation Contact. Fork me on GitHub. Documentation User Guide in English. The user guide is hosted on our wiki. It may be out of …',
        },
        {
          title:
            'Tufts Educational Technology Services | VUE (Visual Understanding Environment)',
          url_of_website: 'https://sites.tufts.edu/ets/vue',
          presentation:
            'The Visual Understanding Environment (VUE) is a concept and content mapping application, developed to support teaching, learning and research and for anyone who needs to organize, contextualize, and acce…',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px / normal Arial, Helvetica, Sans-Serif;
  text-decoration: none;
}
.flex {
  display: flex;
}
a:hover {
  text-decoration: underline;
}
.learning-box {
  width: 100%;
}
.learning {
  width: 1360px;
  min-height: 316px;
  padding: 41px 0 20px 160px;
}
.XX-left {
  width: 652px;
  li {
    padding-left: 0;
    padding-right: 0;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
    margin-bottom: 0;
    width: 612px;
    border-bottom: 1px solid #eee;
    margin: 0 0 2px;
    background-color: #fff;
    h2 {
      padding-bottom: 7px;
      line-height: 20px;
      font-size: 20px;
      a {
        color: #00c;
        font-size: 18px;
        font-weight: normal;
      }
    }
    .XQ-top {
      color: #009030;
      padding-bottom: 3px;
    }
    .XQ-buttom {
      padding-bottom: 0;
      line-height: 16px;
      p {
        line-height: 20px;
        font-size: 12px;
      }
    }
  }
}
.XX-right {
  width: 350px;
  margin-left: 5px;
  margin-top: 25px;
  word-wrap: break-word;
  line-height: 1.2em;
  vertical-align: top;
  .XX-right-top {
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 15px;
    background-color: #fff;
    .XX-right-top-photo {
      padding-bottom: 15px;
      img {
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
      }
      a {
        display: inline-block;
        font-size: 20px;
        width: 260px;
        line-height: 32px;
        color: #1020d0;
      }
    }
    .XX-right-top-url {
      padding-bottom: 15px;
      font-size: 13px;
      span {
        color: #737373;
        width: 75px;
        display: inline-block;
        vertical-align: middle;
      }
      a {
        display: inline-block;
        vertical-align: middle;
        width: 233px;
        color: #1020d0;
      }
    }
    .XX-right-top-presentation {
      line-height: 20px;
      padding-bottom: 10px;
      font-size: 13px;
      span {
        line-height: 20px;
        color: #666;
      }
    }
    .XX-right-top-ico {
      padding-bottom: 0;
      img {
        margin-right: 10px;
      }
      a {
        vertical-align: middle;
        color: #1020d0;
        font-size: 13px;
      }
    }
  }
  .XX-right-buttom {
    padding: 20px;
    border: 1px solid #eee;
    margin-bottom: 15px;
    background-color: #fff;
    .XX-right-buttom-XGLY {
      padding-bottom: 15px;
      justify-content: space-between;
      .XX-right-buttom-text {
        font-size: 16px;
        color: #666;
      }
      .XX-right-buttom-ZK a {
        color: #1020d0;
        font-size: 13px;
      }
    }
    .XX-right-buttom-LB {
      div {
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        a {
          color: #1020d0;
          font-size: 13px;
        }
      }
    }
    .XX-right-buttom-LB div:nth-child(odd) {
      background-color: #f9f9f9;
    }
  }
}
</style>
